<template>
  <svg v-if="name" class="iconfont-svg file-icon" aria-hidden="true" viewBox="0 0 1024 1024">
    <use :xlink:href="symbolId"></use>
  </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 完整的 symbol 名称，例如 icon-pdf / icon-word
  name: { type: String, required: true },
  // 可选前缀（默认与 iconfont 项目一致）
  prefix: { type: String, default: '' }
})

const symbolId = computed(() => {
  const id = `${props.prefix ? props.prefix + '-' : ''}${props.name}`
  // 兼容传入已带 # 的情况
  return id.startsWith('#') ? id : `#${id}`
})
</script>

<style scoped>
.iconfont-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>


